<template>
    <div class="lb-select">
        <div class="lb-s-select" :class="{ 'lb-s-focus' : show}">
            <input
                type="text"
                class="lb-s-input"
                :value="lb_val"
                @blur="show = false"
                @focus="show = true"
                readonly
            />
            <i class="el-icon-arrow-down"></i>
            <div class="lb-s-layer" v-if="show"></div>
        </div>
        <transition name="select">
            <div class="lb-s-options" v-if="show">
                <ul>
                    <li v-for="(list,index) in options" @mousedown="update(list.value,list.label)">{{list.label}}</li>
                </ul>
            </div>
        </transition>
    </div>
</template>
<style scoped lang="less">
    .lb-select {
        color: #575757;
        position: relative;
        .lb-s-select {
            width: inherit;
            line-height: 28px;
            transition: border-color .4s ease;
            height: 28px;
            border-radius: 4px;
            border: 1px solid #D8D8D8;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            text-align: right;
            padding: 0 6px;
            .lb-s-input {
                position: absolute;
                width: inherit;
                height: inherit;
                border-radius: inherit;
                cursor: pointer;
                padding-left: 4px;
                background-color: transparent;
                text-align: left;
                display: block;
                border: none;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            .lb-s-layer {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                cursor: pointer;
                border-radius: inherit;
                z-index: 1;
            }
        }
        .lb-s-focus {
          border-color: #0F8EE9;
        }
        .lb-s-options {
            width: inherit;
            margin-top: 2px;
            box-sizing: border-box;
            cursor: pointer;
            padding: 4px 6px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            background-color: #fff;
            li {
                line-height: inherit;
                padding-left: 4px;
                &:hover {
                     background-color: rgba(15,142,233,.06);
                }
            }
        }
    .select-enter-active, .select-leave-active {
        transition: opacity .3s
    }
    .select-enter, .select-leave-to {
        opacity: 0;
        transition: opacity .3s
    }
    }
</style>
<script>
    export default {
        name: 'lb-select',
        props: {
            options: {
                type: Array
            },
            values: {
                type: [String, Number]
            },
        },
        data () {
            return {
                show: false,
                lb_val: this.options.find((n) => n.value == this.values).label
            }
        },
        methods: {
            update (val,label) {
                this.$emit('section',val);
                this.show = false;
                this.$set(this,'lb_val',label);
            }
        },
        mounted () {
        }
    }
</script>

